<template>
	<view class="message-item">
		<view class="chat-time" v-if="content.showTime">
			{{content.created_at}}
		</view>
		<view class="opposite" v-if="content.identity == 'others'">
			<image :src="content.user_info.upload_avatar ? content.user_info.upload_avatar.path_text : '/static/home/default_user.png'"
			 class="opposite-face" mode="aspectFill" @click="jumpPersonalCenter(content.user_id)"></image>
			<view class="opposite-message">
				<view class="opposite-text">
					{{content.content}}
				</view>
			</view>
		</view>
		<view class="own" v-else>
			<view class="own-message">
				<view class="own-text">
					{{content.content}}
				</view>
			</view>
			<image :src="content.user_info.upload_avatar ? content.user_info.upload_avatar.path_text : '/static/home/default_user.png'"
			 class="own-face" mode="aspectFill" @click="jumpPersonalCenter(content.user_id)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			content: Object
		},
		data() {
			return {

			}
		},
		methods: {
			jumpPersonalCenter(userId) {
				uni.navigateTo({
					url: '/pages/glob/user/index?userId=' + userId
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.message-item {
		.chat-time {
			margin-top: 40upx;
			text-align: center;
			color: #747384;
			font-size: 24upx;
		}

		.opposite,
		.own {
			display: flex;
			margin-top: 20upx;

			&:not(:last-child) {
				margin-bottom: 44upx;
			}
		}

		.opposite {
			padding-left: 24upx;
			padding-right: 108upx;
			justify-content: flex-start;
		}

		.own {
			padding-right: 24upx;
			padding-left: 108upx;
			justify-content: flex-end;
		}

		.own-face,
		.opposite-face {
			width: 64upx;
			height: 64upx;
			border-radius: 50%;
		}

		.opposite-face {
			margin-right: 20upx;
		}

		.own-face {
			margin-left: 20upx;
		}

		.opposite-text,
		.own-text {
			letter-spacing: 1px;
			font-size: 32upx;
			line-height: 48upx;
			box-sizing: border-box;
			padding: 20upx;
			border-radius: 8upx;
			display: inline-block;
			word-break: break-all;
		}

		.opposite-message,
		.own-message {
			flex: 1;
		}

		.own-message {
			display: flex;
			justify-content: flex-end;
		}

		.opposite-text {
			color: #0C0B18;
			background-color: #9E9CB4;
		}

		.own-text {
			color: #DDDBFB;
			background-color: #4F215E;
		}
	}
</style>
